<template>
	<div class='classList'>
		<div class="classList_tab">
			<u-tabs :list="list1" lineColor="#9013FE" lineWidth="20"
				itemStyle="padding-left: 4.6%; padding-right: 4.6%; height: 44px;" :activeStyle="{
			    color: '#9013FE',
			    fontWeight: 'bold',
			    transform: 'scale(1.05)'
			}" :inactiveStyle="{
			    color: '#999999',
			    transform: 'scale(1)'
			}" @change="changeEvent()"></u-tabs>
		</div>
		<div class="classTop">
			<classList :list='classPageList' @upDate='upDate'></classList>
		</div>



	</div>
</template>

<style lang="less">
	.classList {
		.classList_tab {
			background: #fff;
			padding: 10rpx 0;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;

		}

		.classTop {
			margin-top: 100rpx;
		}
	}
</style>


<script>
	import classList from '@/components/classList/index.vue'

	export default {
		components: {
			classList
		},
		data() {
			return {
				list1: [{
					name: '全部',
					status: 5
				},{
					name: '待上课',
					status: 1
				}, {
					name: '已上课',
					status: 2
				}, {
					name: '已取消',
					status: 0
				}, {
					name: '已爽约',
					status: 4
				},
				{
					name: '已评价',
					status: 3
				}],
				page: 1,
				status:5,
				classPageList: [],
				pjshow: false
			}
		},
		onLoad() {
			this.getUserClass()
		},
		onReachBottom() {
			this.page++
			this.getUserClass()
		},
		methods: {
			changeEvent(item) {
				console.log('changeEventchangeEventchangeEventchangeEvent', item.status);
				this.status = item.status
				this.page = 1
				this.classPageList = []
				this.getUserClass()
			},
			async getUserClass() {
				// 0已取消 1报名中 2已完成 3已评价 4已爽约
				const {
					data
				} = await this.$request(this.$Api.userClass, {
					page: this.page,
					status: this.status
				}, "POST")
				if (data.code !== 0) return
				this.classPageList = this.classPageList.concat(data.data.list)
			},
			upDate() {
				this.page = 1
				this.classPageList = []
				this.getUserClass()
			}
		}
	}
</script>